<template>
  <el-card class="box-card" style="width:80%">
    <template #header>
      <div class="card-header dd" >
        <span>大囧智能书健康报告分析</span>
      </div>
        
       <div class="find-data">
          <span>查询数据</span>
          <el-radio-group v-model="labelPosition">
            <el-radio-button label="背包负重">背包负重</el-radio-button>
            <el-radio-button label="左右平衡">左右平衡</el-radio-button>
            <el-radio-button label="背部姿态">背部姿态</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          >
          </el-date-picker>
          <el-button :icon="Search" circle class="bt_find"></el-button>
       </div>  
    </template>
  <div id="myChart123" :style="{width: '100%', height: '550px'}"></div>
   </el-card>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted} from "vue";
import {Search} from '@element-plus/icons-vue'
 onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myChart123"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          data: ["90分", "80分", "70分", "60分", "60以下"]
        },
        yAxis:{},
        series: [
          {
            name: "用户量",
            type: "bar",
            data: [8, 15, 31, 13, 15]
          }
        ]
      });
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
    });


</script>

<style>
.dd{
  margin-bottom: 20px;
}
</style>